import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../../actions/shop'
import  {ProductItem} from '../../../components/ProductItem'
import utils from '../../../utils'
import Header from '../../../components/Header'
import ListView from '../../../components/ListView'

class Cate extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }

  constructor(props) {
    super(props);
    this.pageSize=10
    this.page=1
    this.state={
      data:[]
    }

  }

  componentWillMount(){
   
  }

  componentDidMount(){
   
  }
  
  componentWillUnmount(){
    
  }
  
 
  
  renderList(){
    let { data } =this.state 
    return (
      data.map((item,i) =>(
          <div key={i}>
            <ProductItem item={item} onClick={(item)=>{this.context.router.history.push(`goods/${item.goods_id}`)}}/>
          </div>
        ))
      )
  }
  render(){
    let {selectedCate}=this.props;
    let params={
      need_gift:1,
      cate_id:selectedCate.category_id
    }

    return(
      <div>
        <Header title={selectedCate.category_name}  leftBtn={true} leftBtnTouch={()=>{this.context.router.history.goBack()}}/>
        <div className="cate-containers">
          <ListView
            fiterData={params}
            FetchAction={Actions.getCateGoods}
            top={'55px'}
            bottom={'0'}
            loadSuccess={ (data)=>{ this.setState({data :data})}}
          >
          { this.renderList()}
          </ListView>
        </div>
      </div>
    )
  }
}
 


function mapStateToProps(state){
  return {
    selectedCate:state.selectedCate.toJS().category_id ? state.selectedCate.toJS() : JSON.parse(localStorage.getItem('selectedCate')) 
  }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}
export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(Cate)